<template>
  <div class="wrapper">
    <div class="container">
      <div class="card">
        <div class="avatar_box">
          <div class="avatar">
            <img v-if="avatarId != ''" :src="`http://39.105.125.149:8060/bmOssFile/viewFile?fileId=${avatarId}`" alt="" class="avatar_img">
            <img v-else :src="avatarUrl" alt="" class="avatar_img">
          </div>
          <div>
            <upLoadFile
              message="更换头像"
              class="upload_file"
              ref="upload_dom"
              @fun="passe" 
              @progress="return_back">
            </upLoadFile>
          </div>

           
        </div>

        <ul class="sex_box">
          <li clickVoice="true" class="sex_item" :class="{'active_sex': formData.sex == 1}" @click="changeSex('1')"><i class="icon_boy"></i>男孩</li>
          <li clickVoice="true" class="sex_item" :class="{'active_sex': formData.sex == 2}" @click="changeSex('2')"><i class="icon_girl"></i>女孩</li>
        </ul>

        <ul class="info_box">
          <li class="info_item">
            <span>宝贝昵称</span>
            <input clickVoice="true" type="text" v-model="formData.studentName" @blur="inputBlur">
          </li>

          <li class="info_item">
            <span>宝贝生日</span>
            <!-- <input type="text" v-model="formData.birthday"> -->
            <div clickVoice="true" class="birth_txt" @click="showBirth = true" v-text="formData.birthday"></div>
          </li>
        </ul>
      </div>

      <div clickVoice="true" class="btn_submit btnHover" @click="update" v-if="isUpdate">保存</div>
      <div clickVoice="true" class="btn_submit btnHover" @click="submit" v-else>保存</div>
    </div>

    <audio id='clickVoice' ref="clickVoice"  src="http://www.mingxiaoclub.cn/zebraOnline/voice/click.mp3" ></audio>

    <van-popup
      v-model="showBirth"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :formatter="formatter"
        @confirm="confirm"
        @cancel="cancel"
      />
    </van-popup>
  </div>
</template>


<style scoped>
.wrapper {
  
}
.container {
  padding: 0 .533333rem;
  box-sizing: border-box;
  padding-top: 1.546667rem;
  background: #FFD33D;
  min-height: 100%;
}

.card {
  width: 100%;
  background: #fff;
  box-shadow:0px 0px 5px 2px rgba(227,227,227,1);
  border-radius: .48rem;
  height: 11.16rem;
  padding: 0 1.173333rem;
  padding-top: .653333rem;
  box-sizing: border-box;
}

.avatar_box {
  width: 2.626667rem;
  /* height: 2.626667rem; */
  margin: 0 auto;
  text-align: center;
}
.avatar_box img {
  width: 100%;
  height: 100%;
  display: inline-block;
  border-radius: 50%;
}
.avatar {
  width: 2.626667rem;
  height: 2.626667rem;
}
.avatar_box span {
  color: #C0C4CC;
  font-size: .373333rem;
}

.sex_box {
  display: flex;
  justify-content: space-between;
  margin-top: .4rem;
  margin-bottom: .48rem;
}
.sex_box .sex_item {
  width: 2.666667rem;
  height: .973333rem;
  background: #E3E3E3;
  border-radius:.8rem;
  opacity: .35;
  font-size: .373333rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .4rem;
  box-sizing: border-box;

}

.sex_box .active_sex {
  opacity: 1;
}

.icon_girl {
  display: inline-block;
  width: .8rem;
  height: .56rem;
  background: url('../assets/img/icon_girl.png') 0 0 no-repeat;
  background-size: contain;
}

.icon_boy {
  display: inline-block;
  width: .8rem;
  height: .666667rem;
  background: url('../assets/img/icon_boy.png') 0 0 no-repeat;
  background-size: contain;
}

.info_box {
  text-align: center;
}
.info_item span {
  color: #909399;
  font-size: .373333rem;
  margin-bottom: .106667rem;
  display: block;
}
.info_item input {
  width: 5.12rem;
  border-radius: .8rem;
  padding: .213333rem .266667rem;
  font-size: .4rem;
  color: #333333;
  background: #ececec;
  box-sizing: border-box;
  text-align: center;
  border: none;
}

input:focus {
  background: rgba(254,134,151, .35);;
  border: 1px solid #FFD33D;
}

.info_item .birth_txt {
  width: 5.12rem;
  height: .973333rem;
  padding: .213333rem .266667rem;
  box-sizing: border-box;
  border-radius: .8rem;
  font-size: .4rem;
  color: #333333;
  background: #ececec;
  margin: 0 auto;
}

.info_item:last-child {
  margin-top: .626667rem;
}

.btn_submit {
  width: 3.466667rem;
  height: 1.133333rem;
  background: #FE8697;
  color: #fff;
  font-size: .506667rem;
  margin: 0 auto;
  border-radius: .8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: .906667rem;
}


</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adminBasic");

import defaultAvatar from '../assets/img/avatar.png';
import upLoadFile from '@/components/common/upLoadFile'

export default {
  name: 'babyInfo',
  data() {
    return {
      avatarUrl: defaultAvatar,
      avatarId: '',
      isUpdate: false,
      formData: {
        sex: '1',
        studentName: '',
        birthday: '',
        openId: '',
        mobile: '',
        filesId: '',
      },
      showBirth: false,
      minDate: new Date(2010, 0, 1),
      currentDate: new Date(),

      flag: true,

    }
  },

  created() {
    console.log(this.$route);
    if(this.$route.params.edit) {
      // let babyInfo = JSON.parse(sessionStorage.getItem('babyInfo'));
      let babyInfo = this.$route.params.babyInfo
      this.formData = babyInfo;
      this.isUpdate = true;
      this.avatarId = this.formData.filesId;
    }else{
      this.isUpdate = false;
    }
  },

  mounted() {
    let audio = document.getElementById('clickVoice');
    
    document.ontouchstart = function(e) {
      console.log(e.target)
      // console.log(e.target.getAttribute("clickVoice"));
      if(e.target.getAttribute("clickVoice")) {
        audio.play();
      }
    }
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    afterRead(file) {
      console.log(file.file);
      this.avatarUrl = file.content;

      // var uploadParam = new FormData();
      // uploadParam.file = null;
      // uploadParam.append('file', file, file.name);

      // console.log(uploadParam)
      this.post({
        API: 'uploadFileForDisk',
        data: {
          file: file.file
        }
      }).then(res => {

      })
    },

    passe(e) {
      if (e.error) {
        this.$message.error(e.error)
        return false
      }
      if (e.success) {
        console.log(e.success)
        this.avatarId = e.success.fileId;
        this.formData.filesId = e.success.fileId;
        
      }else{
        this.$notify({ type: 'danger', message: '上传失败', duration: 1200 });
      }
    },
    return_back() {

    },
    submit() {
      console.log(this.formData)
      this.formData.mobile = this.$route.params.phone;
      this.formData.openId = this.$route.params.openId;
      

      if(!this.formData.studentName) {
        this.$notify({ type: 'danger', message: '请输入宝贝昵称', duration: 1200 });
        return false;
      }else if (!this.formData.birthday) {
        this.$notify({ type: 'danger', message: '请输入宝贝生日', duration: 1200 });
        return false;
      }

      if(this.flag) {
        this.flag = false;
        this.post({
          API: 'insert',
          data: this.formData
        }).then(res => {
          // console.log(res);
          this.flag = true;
          this.$router.replace({
            name: 'personCenter',
            params: {
              openId: this.formData.openId
            }
          })
          this.$notify({ type: 'success', message: '保存成功', duration: 1200 });
        }).catch(err => {
          this.$notify({ type: 'danger', message: err, duration: 1200 });
        })
      }

    },
    update() {
      console.log('update')
      console.log(this.formData);

      if(!this.formData.studentName) {
        this.$notify({ type: 'danger', message: '请输入宝贝昵称', duration: 1200 });
        return false;
      }else if (!this.formData.birthday) {
        this.$notify({ type: 'danger', message: '请输入宝贝生日', duration: 1200 });
        return false;
      }

      this.post({
        API: 'update',
        data: this.formData
      }).then(res => {
        // console.log(res);
        this.$router.replace({
          name: 'personCenter',
          params: {
            openId: this.formData.openId
          }
        })
        this.$notify({ type: 'success', message: '保存成功', duration: 1200 });
      }).catch(err => {
        this.$notify({ type: 'danger', message: err, duration: 1200 });
      })
    },
    changeSex(e) {
      this.formData.sex = e;
    },

    confirm(date) {
      console.log(this.format(date))
      this.formData.birthday = this.format(date);
      this.showBirth = false;
    },
    cancel() {
      this.showBirth = false;
    },

    format(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if(month < 10) {
        month = `0${month}`
      }
      let day = date.getDate();
      if(day < 10) {
        day = `0${day}`
      }
      return `${year}-${month}-${day}`
    },

    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      } else{
        return `${value}日`
      }
      return value;
    },

    inputBlur() {
      window.scrollTo(0, document.documentElement.clientHeight); 
    }
  },
  components: {
    upLoadFile
  }
}
</script>

